<script setup lang="ts">
import { isNumber } from "@tarojs/shared";
import BySquare from "./BySquare.vue";

const {
  min = 0,
  max,
  disabled,
} = defineProps<{
  modelValue: number;
  disabled?: boolean;

  initialValue?: number;
  max?: number;
  min?: number;
}>();

const model = defineModel<number>({ default: 0 });

function increment() {
  if (disabled) return;

  let nextVal = model.value + 1;
  model.value = isNumber(max) ? Math.min(nextVal, max) : nextVal;
}

function decrement() {
  if (disabled) return;

  const nextVal = model.value - 1;
  model.value = isNumber(min) ? Math.max(min, nextVal) : nextVal;
}
</script>

<template>
  <view class="inline-flex items-center" @tap.stop>
    <BySquare
      class="bg-error text-white"
      :size="50"
      icon="Reduce"
      @tap="decrement"
    />

    <input
      :value="modelValue"
      :disabled="true"
      type="number"
      class="flex-none w-[120px] !h-[50px] mx-2 text-center bg-white text-lg text-error rounded-full"
    />

    <BySquare
      class="bg-error text-white"
      :size="50"
      icon="Plus"
      @tap="increment"
    />
  </view>
</template>
